<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Template &middot; Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <script type="text/javascript">
      function validate_old(obj)
      {
        if(obj.uname.value == '') {
          alert("Please enter Name");
          obj.uname.focus();
          return false;
        } else
        if(obj.uname.value.length < 6) {
          alert("Name should be 6 char long");
          obj.uname.focus();
          obj.uname.select();
          return false;
        } else
        if(obj.hiddenGender.value=='') {
          alert("Please select gender");
          obj.hiddenGender.focus();
          return false;
        }
        return true;
      }
      ///////////////////////////////////////////////
      function validate(obj)
      {
        var oHobbies = document.getElementsByName('hobbies[]');
        var minCheck = 2;
        var count = 0;

        for(var i=0 ; i < oHobbies.length ; i++) {
          if(oHobbies[i].checked == true) {
            count++;
          }
        }
        if(count < minCheck) {
          alert("Please check atleast "+minCheck+" hobbbies");
          return false;
        }
        return true;
      }
      ////////////////////////////////////////////////
    </script>
  </head>
  <body>
    <div class="container">
      <div class="masthead">
        <h3  class="muted">Project name</h3>
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
              <ul class="nav">
                <li class="active">
                  <a href="#">Home</a>
                </li>
                <li>
                  <a href="#">Projects</a>
                </li>
                <li>
                  <a href="#">Services</a>
                </li>
                <li>
                  <a href="#">Downloads</a>
                </li>
                <li>
                  <a href="#">About</a>
                </li>
                <li>
                  <a href="#">Contact</a>
                </li>
              </ul>
            </div>
          </div>
        </div><!-- /.navbar -->
      </div>
      <!-- Jumbotron -->
      <div class="well">
        <h3>Please Regsiter Here</h3>
      </div>
      <!-- Example row of columns -->
      <div  class="row-fluid">
        <div  class="span9" >
          <form class="form-horizontal" name="register" onSubmit="return validate(this)">
<input type="hidden" name="hiddenGender" >

          <div class="control-group">
              <label class="control-label" for="inputEmail">Name</label>
              <div class="controls">
                <input
                type="text"
                name="uname"
                maxlength="50"
                size="20"
                oncopy="return false"
                onpaste="return false"
                autocomplete="off"
                id="unameId"
                placeholder="My name is" >
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" >Email</label>
              <div class="controls">
                <input type="email" autocomplete="off" name="email" id="emailId"  placeholder="My email is">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Password</label>
              <div class="controls">
                <input type="password" name="password"  placeholder="Password">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" >Confirm Password</label>
              <div class="controls">
                <input type="password" name="cPassword"  placeholder="Password">
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" >Gender</label>
              <div class="controls">
                <label class="radio">
                  <input type="radio" onClick="document.register.hiddenGender.value='m'" name="gender"  value="m" >
                  Male</label>
                <label class="radio">
                  <input type="radio" onClick="document.register.hiddenGender.value='f'" name="gender"  value="f">
                  Female</label>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" >Date Of Birth</label>
              <div class="controls">
                <input placeholder="DD/MM/YYYY"  type="date" name="dob" id="dobId" />
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" >Address</label>
              <div class="controls">
                <textarea placeholder="My address is"  name="address" id="addressId" rows="5" cols="20"></textarea>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" >Country</label>
              <div class="controls">
                <select name="country">
                  <option value="">-SELECT-</option>
                  <option value="in">India</option>
                  <option value="pk">Pakistan</option>
                  <option value="np">Nepal</option>
                  <option value="bn">Bangladesh</option>
                  <option value="ch">China</option>
                </select>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" >Languages Known</label>
              <div class="controls">
                <select name="lang[]" multiple>
                  <option value="hi">Hindi</option>
                  <option value="en">English</option>
                  <option value="tm">Tamil</option>
                  <option value="gj">Gujrati</option>
                  <option value="mh">Marathi</option>
                </select>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" >Hobbies</label>
              <div class="controls">
                <label class="checkbox">
                  <input  type="checkbox" value="ck" name="hobbies[]">
                  Cricket </label>
                <label class="checkbox">
                  <input  type="checkbox" value="bd" name="hobbies[]">
                  Badminton </label>
                <label class="checkbox">
                  <input  type="checkbox" value="hk" name="hobbies[]">
                  Hockey </label>
                <label class="checkbox">
                  <input  type="checkbox" value="st" name="hobbies[]">
                  Study </label>
              </div>
            </div>

            <div class="control-group">
              <label class="control-label">Avatar</label>
              <div class="controls">
                <input type="file" name="avatar"  />
              </div>
            </div>

            <div class="control-group">
              <div class="controls">
                <input type="submit" value="I am done!!" class="btn btn-success btn-large">
              </div>
            </div>
          </form>
        </div>
      </div>
      <hr>
      <div class="footer">
        <p>
          &copy; Company 2013
        </p>
      </div>
    </div>
    <!-- /container -->
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>
